<template>
  <div>
    <Echart
      :options="options"
      id="gauge"
      :height="height"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "../echart/index.vue";
import ChartsMixins from "@/utils/newJs/chartsMixins";
export default {
  mixins: [ChartsMixins],
  data() {
    return { options: {} };
  },
  components: {
    Echart,
  },
  props: {
    gaugeInfo: {
      type: Object,
      default: () => ({}),
    },
    height: String,
    index: { Number },
  },
  mounted() {},
  watch: {
    gaugeInfo: {
      handler(newData) {
        let color = [
          [0.6, "#e64242"],
          [0.8, "#E1E100"],
          [1, "rgb(25 190 107)"],
        ];
        this.options = {
          title: {
            text: newData.TitleText[this.index],
            left: "center",
            top: "4%",
            textStyle: {
              fontSize: this.transformFontSize(18),
              color: "#303133e8",
            },
            // subtext: subtext,
            subtextStyle: {
              color: "#1890FF",
              fontSize: this.transformFontSize(10),
            },
          },
          graphic: [
            {
              type: "rect",
              left: "center",
              top: "4",
              shape: {
                width:
                  (newData.TitleText[this.index].length + 1) *
                  this.transformFontSize(18),
                height: 1.3 * this.transformFontSize(18),
                r: 5,
              },
              style: {
                fill: "none",
                stroke: "#000",
                lineWidth: 2,
              },
            },
          ],
          series: [
            {
              type: "gauge",
              startAngle: 200,
              endAngle: -20,
              radius: "100%",
              center: ["50%", "75%"], //仪表盘位置
              splitNumber: 5, //分割数
              axisLine: {
                lineStyle: {
                  //盘宽
                  width: this.transformFontSize(9),
                  color: color,
                },
              },
              pointer: {
                itemStyle: {
                  color: "auto",
                },
              },
              //小线
              axisTick: {
                distance: -this.transformFontSize(10),
                length: this.transformFontSize(5),
                lineStyle: {
                  color: "#fff",
                  width: 1,
                },
              },
              //大线
              splitLine: {
                distance: 0,
                length: 0,
              },
              //刻度
              axisLabel: {
                color: "inherit",
                distance: this.transformFontSize(16),
                fontSize: this.transformFontSize(12),
              },
              //中间指标的大小和颜色
              detail: {
                valueAnimation: true,
                formatter: "{value}%",
                color: "inherit",
                fontSize: this.transformFontSize(14),
              },
              data: [
                {
                  value: newData.value[this.index],
                },
              ],
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
</style>